<template>
  <div class="admin-login">
    <h1>旅游自助平台</h1>
    <div class="login">
      <h2>管理员登陆</h2>
      <div class="admin-uname" ref="adminUname">
        <i class="el-icon-user" @click="unfold('adminUname')"></i>
        <input
          type="text"
          v-model="adminUname"
          @blur="blur('adminUname')"
          @input="checkValue('adminUname')"
        />
        <i
          class="el-icon-circle-close close"
          v-show="adminUname"
          @click="clear('adminUname')"
        ></i>
      </div>
      <div class="admin-pwd" ref="adminPwd">
        <i class="el-icon-lock" @click="unfold('adminPwd')"></i>
        <input
          type="password"
          v-model="adminPwd"
          @blur="blur('adminPwd')"
          @input="checkValue('adminPwd')"
        />
        <i class="el-icon-view showPwd" v-show="adminPwd" @click="showPwd"></i>
        <i
          class="el-icon-circle-close close"
          v-show="adminPwd"
          @click="clear('adminPwd')"
        ></i>
      </div>
      <div class="submit-btn" @click="login">
        <el-button type="primary" class="btn" :loading="loginLoading"
          >登陆</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/admin/admin";
import userModule from "@/utils/userInfo";
export default {
  name: "LoginView",
  data() {
    return {
      adminUname: "ym",
      adminPwd: "ym2023",
      loginLoading: false,
    };
  },
  methods: {
    // 登陆
    async login() {
      if (this.adminUname === "") {
        this.$message.warning("请输入账号");
        return;
      }
      if (this.adminPwd === "") {
        this.$message.warning("请输入密码");
        return;
      }
      try {
        this.loginLoading = true;
        const res = await login({
          adminUname: this.adminUname,
          adminPwd: this.adminPwd,
        });
        localStorage.setItem("a_t", res.data.token);
        userModule.setUser({
          nickname: res.data.nickname,
          id: res.data.id,
          area: res.data.area,
          ip: res.data.ip,
        });
        this.$router.push("/admin");
      } finally {
        this.loginLoading = false;
      }
    },
    // 展开输入框
    unfold(v) {
      // 给input框添加css样式
      this.$refs[v].style.cssText = "width:24rem; border-bottom:1px solid #fff";
      this.$refs[v].children[0].style.cssText = "color:#fff";
      this.$refs[v].children[1].focus();
    },
    // 检查输入框的值是否合规
    checkValue(v) {
      // 用正则只允许有数字或字母
      const reg = /[^a-zA-Z0-9]/g;
      const val = this.$refs[v].children[1].value.replace(reg, "");
      this[v] = val;
    },
    // 查看密码
    showPwd() {
      if (this.$refs.adminPwd.children[1].type === "password") {
        this.$refs.adminPwd.children[1].type = "text";
      } else {
        this.$refs.adminPwd.children[1].type = "password";
      }
    },
    // 清空输入框
    clear(v) {
      this.$refs[v].children[1].value = "";
      this[v] = "";
      this.$refs[v].children[1].focus();
    },
    // 失焦
    blur(v) {
      if (this.$refs[v].children[1].value === "") {
        this.$refs[v].style.cssText = "width:1.3rem;";
        this.$refs[v].children[0].style.cssText = "color: #333;";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.admin-login {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../../../assets/bg2.jpeg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  h1 {
    position: absolute;
    left: 2.6rem;
    top: 1.4rem;
    font-size: 2.4rem;
    font-family: "STXingkai";
    color: #fff;
    z-index: 2;
  }
  .login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30rem;
    height: 20rem;
    transform: translate(-50%, -50%);
    color: #fff;
    h2 {
      font-family: "STZhongsong";
    }
    .admin-uname,
    .admin-pwd {
      margin: 2rem auto;
      width: 1.3rem;
      height: 2.6rem;
      display: flex;
      align-items: center;
      transition: all 0.4s;
      i:nth-child(1) {
        font-size: 1.2rem;
        margin-right: 1rem;
        color: #333;
        cursor: pointer;
        transition: all 0.2s;
      }
      input {
        width: 76%;
        height: 100%;
        border: none;
        outline: none; /* 移除默认焦点轮廓 */
        background-color: transparent;
        color: #fff;
        font-size: 1.4rem;
        border: none;
      }
      .showPwd {
        position: absolute;
        right: 4rem;
        cursor: pointer;
      }
      .close {
        position: absolute;
        right: 2rem;
        cursor: pointer;
      }
    }
    .submit-btn {
      position: relative;
      margin: 2rem auto;
      width: 2.8rem;
      height: 2.8rem;
      cursor: pointer;
      border-radius: 50%;
      transition: all 0.4s;
      &:hover {
        width: 24rem;
        border-radius: 2rem;
      }
      &:hover .btn {
        font-size: 0.9rem;
      }
      .btn {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        text-align: left;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
      }
    }
  }
}
</style>